<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Next-Generation Internet Command System</title>
    <link rel='stylesheet' type='text/css' href='bootstrap.min.css'>
    <link rel='stylesheet' type='text/css' href='excentric-label.css'>
    <script type="text/javascript" src='jquery-1.8.0.min.js'></script>
    <script type="text/javascript" src='bootstrap.min.js'></script>
    <script type="text/javascript" src='d3.v2.min.js'></script>
    <script type="text/javascript" src="http://polymaps.org/polymaps.min.js?2.5.0"></script>
    <style type="text/css">
      body {
        font-family:"Helvetica", sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="map" class='container'>
      <br>
      <div class='btn btn-primary' id='text-collapse-btn'>Text Collapse</div>
      <input type='button' value='Uncollapse' class='btn btn-primary' id='refresh-btn' onClick='window.location.reload()'>
      <h3>Mouse over the collapsed dots to activate the focus view.</h2>
    </div>
    <script type="text/javascript">
      function Text(x,y,size){
        this.x = x;
        this.y = y;
        this.fontSize = size;
      }
      var words = [];
      var x0 = 100;
      var y0 = 200;
      var dx = 10;
      var dy = 10;
      for(i = 0;i < 7;i++){
        var w = new Text(x0 + i*dx,y0 + i*dy,20);
        words.push(w);
      }
      for(i = 5;i < 10;i++){
        var w = new Text(x0+20,y0 + 50 + (i+1)*dy,20);
        words.push(w);
      }
      for(i = 10;i < 12;i++){
        var w = new Text(x0*4,y0+4*dy*(i-10),20);
        words.push(w);
      }
      
      var g = d3.select('#map').append('svg:svg')
          .attr('height',480)
          .attr('width',960)
          .append('svg:g')
          .attr('transform','translate(0,0)');
          //.style('fill','blue');

      g.selectAll('g')
          .data(words)
          .enter()
          .append('g')
          .attr('class','text-container')
          .style('background-color','blue')
          .append('text')
          .text("Text here")
          .attr('transform',function(d){
            return 'translate(' + d.x + ',' + d.y + ')';
          })
          .attr('alignment-baseline','middle')
          .attr('text-anchor','middle')
          .attr('font-size',function(d){return d.fontSize.toString()});
      var starIconUrl = 'http://northeast.nics.ll.mit.edu/sadisplay/img/markers/Law_US_Marshall_S1.png';
      var vehicleIconUrl = "http://northeast.nics.ll.mit.edu/sadisplay/img/markers/mil_vehicle.png";
      var helicopterIconUrl = "http://northeast.nics.ll.mit.edu/sadisplay/img/markers/E_Med_Evacuation_Helicopter_Station_S1.png";
      function Image(x,y,size,type){
        this.x = x;
        this.y = y;
        this.size = size;
        this.type = type;
        this.url = function(){
          switch (type){
            case "star":
              return starIconUrl;
            case "vehicle":
              return vehicleIconUrl;
            case "helicopter":
              return helicopterIconUrl;
          }
        };
      }
      var images = [];
      images[0] = new Image(140,240,16,"star");
      images[1] = new Image(180,240,16,"helicopter");
      images[2] = new Image(160,280,16,"helicopter");
      images[3] = new Image(200,290,16,"vehicle");
      images[4] = new Image(0,0,16,"vehicle");
      
      g.selectAll('image')
          .data(images)
          .enter()
          .append('image')
          .attr('transform',function(d){
            return 'translate(' + d.x + ',' + d.y + ')';
          })
          .attr('width',function(d){return d.size;})
          .attr('height',function(d){return d.size;})
          .attr('xlink:href',function(d){return d.url();});

    </script>
    <script type="text/javascript" src='text-collapse.js'></script>
    <script type='text/javascript'>
      //call textCollapse function
      $('#text-collapse-btn').click(function(){
        textCollapse();
      })
    </script>
    <script type="text/javascript" src='excentric-label.js'></script>
  </body>
</html>
